<!doctype html>
<html>
  <head>
    <title>混合参数传递示例</title>
    <script src="https://unpkg.com/vue@3.4.0"></script>
    <style>
      .color-button {
        width: 100px;
        height: 50px;
        margin: 5px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        color: white;
        font-weight: bold;
      }
      .history-item {
        padding: 5px;
        margin: 2px;
        border-left: 3px solid #ccc;
        background: #f9f9f9;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>颜色选择器</h2>
      <div>
        <button
          v-for="color in colors"
          :key="color.name"
          class="color-button"
          :style="{ backgroundColor: color.value }"
          @click="selectColor($event, color.name, color.value)"
        >
          {{ color.name }}
        </button>
      </div>

      <div style="margin-top: 20px">
        <h3>当前选择</h3>
        <div
          :style="{ 
                width: '200px', 
                height: '100px', 
                backgroundColor: selectedColor,
                border: '2px solid #333'
            }"
        ></div>
        <p>颜色名称：{{ selectedColorName }}</p>
        <p>颜色值：{{ selectedColor }}</p>
      </div>

      <div style="margin-top: 20px">
        <h3>选择历史</h3>
        <div v-for="item in history" :key="item.id" class="history-item">
          <strong>{{ item.colorName }}</strong>
          ({{ item.colorValue }}) - 点击位置: ({{ item.clickX }}, {{ item.clickY }}) - 时间: {{
          item.timestamp }}
          <button
            @click="restoreColor($event, item.colorName, item.colorValue, item.id)"
            style="margin-left: 10px"
          >
            恢复
          </button>
        </div>
      </div>
    </div>

    <script>
      const { createApp, ref } = Vue

      createApp({
        setup() {
          const colors = ref([
            { name: '红色', value: '#FF0000' },
            { name: '绿色', value: '#00FF00' },
            { name: '蓝色', value: '#0000FF' },
            { name: '黄色', value: '#FFFF00' },
            { name: '紫色', value: '#800080' },
            { name: '橙色', value: '#FFA500' }
          ])

          const selectedColor = ref('#FFFFFF')
          const selectedColorName = ref('白色')
          const history = ref([])
          let historyId = 1

          const selectColor = (event, colorName, colorValue) => {
            // 更新当前选择
            selectedColor.value = colorValue
            selectedColorName.value = colorName

            // 记录到历史
            history.value.unshift({
              id: historyId++,
              colorName,
              colorValue,
              clickX: event.clientX,
              clickY: event.clientY,
              timestamp: new Date().toLocaleTimeString()
            })

            // 限制历史记录数量
            if (history.value.length > 10) {
              history.value.pop()
            }

            console.log('颜色选择事件：', {
              event: event,
              colorName: colorName,
              colorValue: colorValue,
              target: event.target,
              coordinates: { x: event.clientX, y: event.clientY }
            })
          }

          const restoreColor = (event, colorName, colorValue, historyId) => {
            selectedColor.value = colorValue
            selectedColorName.value = colorName

            console.log('恢复颜色：', {
              event: event,
              colorName: colorName,
              colorValue: colorValue,
              historyId: historyId,
              restoreTime: new Date().toLocaleTimeString()
            })
          }

          return {
            colors,
            selectedColor,
            selectedColorName,
            history,
            selectColor,
            restoreColor
          }
        }
      }).mount('#app')
    </script>
  </body>
</html>
